<template>
  <div class="container">
    <h2>光遇打卡景点<br>____________________________</h2>
    <div class="desc">
    <ul>
    <li v-for="(item, index) in pwd3" :key="index" class="a"> 
        
          <img :src="getImgUrl(item.imgs)" alt=""  class="image-item">
          
        </li>
    </ul>
    </div>
  </div>


</template>


<script>
import axios from 'axios'
//import pwd3 from '../public/pwd3.json'
import { ref ,onMounted } from 'vue';


 export default {
    setup() {
      const pwd3 = ref(null);
      onMounted(() => {
        axios.get('../public/pwd3.json')
         .then(response => {
            pwd3.value = response.data
          })
         .catch(error => {
            console.log(error)
          })
      });
      const getImgUrl = (imgs) => {
        //用相对路径
        return new URL('../assets/img/' + imgs, import.meta.url).href
      }
      return {
        pwd3,
        getImgUrl
      }
    }
 }

/*用data()定义pwd3，mounted()获取数据，methods定义方法，getImgUrl用于获取图片路径
export default {
  data () {
    return {
      pwd3: null,
    }
  },
  mounted () {
    axios.get('../public/pwd3.json')
      .then(response => {
        this.pwd3 = response.data
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    //定义方法，用于获取图片路径，不能用require,因为版本问题
    getImgUrl: function (imgs) {
        //用相对路径
        return new URL('../assets/img/' + imgs, import.meta.url).href
  }
}
}
*/

</script>

<style scoped>
.container {
  max-width: 640rpx;
  margin: 0 auto;
  padding: 20rpx;
}

h2{
	font-family: "华文琥珀";
	font-size: 40px;
	color: #FF6600;
  font-weight: normal;
}
.a{
    font-size: 0px;/*取消小圆点*/
}
.desc ul{
    display: flex;/*设置ul为flex布局*/
    flex-wrap: wrap;
    justify-content: space-between;
}
.desc li{
    list-style: none;
    margin-bottom: 20rpx;
    position: relative;
    
}
img{
    width: 350px;
    height: 250px;
    margin-bottom: 10px;/*图片间距*/
}

</style>